import {
    todayDatas, dayTimes, passengerData, sevenData, moreMakeData, ageData, topSix, todaySumNum, abroadNum,
    sevenRate, hebeiData, monthData, sourceRank,
} from '../../axios/visitor/visitor'
import {toMillionNums} from '../../filters/index'
import AllinMarker from "../../components/allinMarker/AllinMarker";

export default {
    data() {
        return {
            showHide: true,
            alertWindowShow: false,
            spanActive: 1,
            isClick: 1,
            todayData: {},  //今日数据
            todayTimes: [],  //今日 各时段数据
            todayTimes2: [],  //今日 各时段数据
            passenger: {},  //客流统计
            sevenPassenger: [],  //近七天客流量
            moreMakeArr: [],  //多次预约客流统计
            todayTopData: [],  //当日入园top数据
            todayInpark: 0,  //今日入园游客数量
            sevens: [],  //近七天核销占比趋势
            hebeiRank: [],  //河北趋势
            month: [],  //近三十天各市累计入园游客排名
            ageArr: [],  //年龄
            abroadObj: [], //国外游客数量
            abroadAllNums: 0,
            sourceDatas1: [],  //省份数据
            sourceDatas2: [],  //省份数据
            abroadEmpty:[
                {userSource:'美国',userNumber:0},
                {userSource:'韩国',userNumber:0},
                {userSource:'日本',userNumber:0},
                {userSource:'英国',userNumber:0},
                {userSource:'澳大利亚',userNumber:0},
                {userSource:'其他国家',userNumber:0},
            ],

            selectArr: [],
            selectMenu: [{
                id: 1,
                name: '游客热力'
            }],
            timer1:null,
            timer2 : null,
            myChart8 : {},
            myChart9 : {},
            myChart10 : {},
            myChart11 : {}
        }
    },
    mounted() {
        const myChart1 = this.$echarts.init(document.getElementById('dayTimes'));
        const myChart2 = this.$echarts.init(document.getElementById('dayPerson'));
        const myChart3 = this.$echarts.init(document.getElementById('parkSeven'));
        const myChart4 = this.$echarts.init(document.getElementById('moreMake'));
        const myChart5 = this.$echarts.init(document.getElementById('allInPark'));
        const myChart6 = this.$echarts.init(document.getElementById('dayTop6'));
        const myChart7 = this.$echarts.init(document.getElementById('dayTop7'));
        this.myChart8 = this.$echarts.init(document.getElementById('monthInPark'));
        this.myChart9 = this.$echarts.init(document.getElementById('provinceChart1'))
        this.myChart10 = this.$echarts.init(document.getElementById('provinceChart2'))
        this.myChart11 = this.$echarts.init(document.getElementById('monthRank'));
        const myChart12 = this.$echarts.init(document.getElementById('abroad'));
        this.getTodayDatas();
        this.getDayTimes(myChart1,myChart2);
        this.getPassengerData();
        this.getSevenData(myChart3);
        this.getMoreMakeData(myChart4);
        this.getAgeData(myChart5);
        this.getTopSix(myChart6);
        this.getTodaySumNum();
        this.getAbroadNum(myChart12);
        this.getSevenRate(myChart7);
        this.getMonthData(this.myChart11);
        this.timer1 = setInterval(()=>{
            this.getTodayDatas();
            this.getDayTimes(myChart1,myChart2);
            this.getPassengerData();
            this.getSevenData(myChart3);
            this.getMoreMakeData(myChart4);
            this.getAgeData(myChart5);
            this.getTopSix(myChart6);
            this.getTodaySumNum();
            this.getAbroadNum(myChart12);
            this.getSevenRate(myChart7);
        },10000)
        this.closeTheWindow();  //关弹窗
    },
    methods: {
        getTodayDatas() {
            //今日数据统计
            todayDatas().then(res => {
                this.todayData = res.data;
            }, err => {
            })
        },
        getDayTimes(dom1,dom2) {
            //当日各时段客流统计
            dayTimes().then(res => {
                this.todayTimes2 = this.checkSameData(res.data);
                let timeList = [
                    {
                        label:'00:00',
                        value:'00'
                    },
                    {
                        label:'01:00',
                        value:'01'
                    },
                    {
                        label:'02:00',
                        value:'02'
                    },
                    {
                        label:'03:00',
                        value:'03'
                    },
                    {
                        label:'04:00',
                        value:'04'
                    },
                    {
                        label:'05:00',
                        value:'05'
                    },
                    {
                        label:'06:00',
                        value:'06'
                    },
                    {
                        label:'07:00',
                        value:'07'
                    },
                    {
                        label:'08:00',
                        value:'08'
                    },
                    {
                        label:'09:00',
                        value:'09'
                    },
                    {
                        label:'10:00',
                        value:'10'
                    },
                    {
                        label:'11:00',
                        value:'11'
                    },
                    {
                        label:'12:00',
                        value:'12'
                    },
                    {
                        label:'13:00',
                        value:'13'
                    },
                    {
                        label:'14:00',
                        value:'14'
                    },
                    {
                        label:'15:00',
                        value:'15'
                    },
                    {
                        label:'16:00',
                        value:'16'
                    },
                    {
                        label:'17:00',
                        value:'17'
                    },
                    {
                        label:'18:00',
                        value:'18'
                    },
                    {
                        label:'18:00',
                        value:'18'
                    },
                    {
                        label:'19:00',
                        value:'19'
                    },
                    {
                        label:'20:00',
                        value:'20'
                    },
                    {
                        label:'21:00',
                        value:'21'
                    },
                    {
                        label:'22:00',
                        value:'22'
                    },
                    {
                        label:'23:00',
                        value:'23'
                    },
                ]
                res.data.forEach(i=>{
                    timeList.forEach(j=>{
                        if( i.selectTime == j.value ){
                            i.selectTime = j.label
                        }
                    })
                })
                this.todayTimes = res.data
                this.dayTimesInit(dom1)
                this.dayPersonInit(dom2)
            }, err => {
            })
        },
        getPassengerData() {
            //客流统计
            passengerData().then(res => {
                this.passenger = res.data;
            }, err => {
            })
        },
        getSevenData(dom) {
            //近七天客流统计
            sevenData().then(res => {
                this.sevenPassenger = res.data;
                this.parkSevenInit(dom)
            }, err => {
            })
        },
        getMoreMakeData(dom) {
            //多次预约客流统计
            moreMakeData().then(res => {
                this.moreMakeArr = res.data;
                this.moreMakeInit(dom)
            }, err => {
            })
        },
        getAgeData(dom) {
            //年龄入园统计
            ageData().then(res => {
                this.ageArr = res.data;
                this.allInParkInit(dom)
            }, err => {
            })
        },
        getTopSix(dom) {
            //当日入园top
            topSix().then(res => {
                this.todayTopData = res.data;
                this.dayTop6Init(dom)
            }, err => {
            })
        },
        getTodaySumNum() {
            //当日入园游客数量
            todaySumNum().then(res => {
                this.todayInpark = res.data;
            }, err => {
            })
        },
        getAbroadNum(dom) {
            //国外游客数量
            abroadNum().then(res => {
                this.abroadObj = res.data;
                this.abroadInit(dom)
            }, err => {
            })
        },
        getSevenRate(dom) {
            //近七天核销占比趋势
            sevenRate().then(res => {
                this.sevens = res.data;
                this.dayTop7Init(dom)
            }, err => {
            })
        },
        getHebeiData() {
            //河北省当月入园游客趋势图
            let params = {'Tenant-Id': 10100}
            hebeiData(params).then(res => {
                this.hebeiRank = res.data;
                this.monthInParkInit(this.myChart8)
            }, err => {
            })
        },
        getMonthData(dom) {
            //近三十天各市累计入园游客排名
            let params = {'Tenant-Id': 10100}
            monthData(params).then(res => {
                this.month = res.data;
                this.monthRankInit(dom)
            }, err => {
            })
        },
        getSourceRank(type) {
            //国内来源排名 type 1今日 2近7日 3 日
            let params = {
                day: type
            }
            sourceRank(params).then(res => {
                this.sourceDatas1 = res.data.slice(0, 17);
                this.sourceDatas2 = res.data.slice(17, 34);
                this.provinceChart1Init(this.myChart9)
                this.provinceChart2Init(this.myChart10)
            }, err => {
            })
        },
        closeTheWindow() {
            document.addEventListener('mouseup',(e) =>{
                let box = this.$refs.windowBox
                if (box) {
                    if (!box.contains(e.target)) {
                        this.alertWindowShow = false
                    }
                }
            })
        },
        checkSameData(arr) {
            //数组合并
            var map = {}, dest = [];
            for (var i = 0; i < arr.length; i++) {
                var ai = arr[i];
                if (!map[ai.selectTime]) {
                    if( Number(ai.selectTime) < 18 &&  Number(ai.selectTime) > 8 ){
                        dest.push({
                            selectTime: ai.selectTime,  //时间
                            onCount: ai.onCount,  //在园
                            inCount: ai.inCount,  //入园
                            outCount: ai.outCount  //出园
                        });
                        map[ai.selectTime] = ai;
                    }
                } else {
                    for (var j = 0; j < dest.length; j++) {
                        var dj = dest[j];
                        if( Number(dj.selectTime) < 18 &&  Number(dj.selectTime) > 8 ){
                            if (dj.selectTime == ai.selectTime) {
                                dj.inCount = (parseFloat(dj.inCount) + parseFloat(ai.inCount));
                                dj.onCount = (parseFloat(dj.onCount) + parseFloat(ai.onCount));
                                dj.outCount = (parseFloat(dj.outCount) + parseFloat(ai.outCount));
                                break;
                            }
                        }
                        
                    }
                }
            }
            let result = [];
            for (var i = 0; i < dest.length; i += 2) {
                result.push(dest.slice(i, i + 2));
            }
            let times = [];
            for(var k = 0; k < 4; k++) {
                let index1 = k * 2;
                let index2 = (k + 1) * 2;
                if( dest[index1].selectTime && dest[index2].selectTime ){
                    times.push(dest[index1].selectTime + '点-' + dest[index2].selectTime + '点')
                }
            }
            let allResule = [];
            for (var i = 0; i < times.length; i++) {
                let inCount = 0;
                let onCount = 0;
                let outCount = 0;
                let selectTime = '';
                for (var j = 0; j < result[i].length; j++) {
                    inCount += result[i][j].inCount;
                    onCount += result[i][j].onCount;
                    outCount += result[i][j].outCount;
                }
                let data = {
                    selectTime: selectTime,
                    inCount: inCount,
                    onCount: onCount,
                    outCount: outCount
                }
                allResule.push(data);
            }
            for(var i = 0; i < times.length; i++) {
                allResule[i].selectTime = times[i];
            }
            return allResule
        },
        changeShow() {
            this.showHide = !this.showHide;
            this.alertWindowShow = false;
        },
        showWindow() {
            this.alertWindowShow = !this.alertWindowShow;
            if (this.alertWindowShow == true) {
                this.getSourceRank(this.isClick);
            }
        },
        changeDates(val) {
            this.spanActive = val;
            if (val == 2) {
                //河北省数据
                this.getHebeiData();
            }
            // this.isClick = 1;
            this.getSourceRank(this.isClick);
        },
        changeTime(val) {
            this.isClick = val;
            this.getSourceRank(this.isClick);
        },
        dayTimesInit(dom) {
            var inPeopel = [];
            var outPeopel = [];
            var times = [];
            for (var i = 0; i < this.todayTimes2.length; i++) {
                inPeopel.push(this.todayTimes2[i].inCount);
                outPeopel.push(this.todayTimes2[i].outCount);
                times.push(this.todayTimes2[i].selectTime);
            }
            const options = {
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    // transitionDuration: 0,
                    backgroundColor: 'rgba(50,50,50,0.7)',
                    textStyle: {
                        color: '#fff'
                    },
                    borderWidth: '0',
                    formatter: function (params) {
                        let str = '';
                        let time = params[0].name;
                        for (let i = 0; i < params.length; i++) {
                            str += params[i].marker + '' + params[i].seriesName + ' : ' + params[i].data + '<br>'
                        }
                        return time + '<br>' + str
                    },
                    axisPointer: {
                        lineStyle: {
                            type: 'solid',
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(0, 255, 233,0)'
                                }, {
                                    offset: 0.5,
                                    color: 'rgba(255, 255, 255,1)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(0, 255, 233,0)'
                                }],
                                global: false
                            }
                        }
                    }
                },
                legend: {
                    type: 'plain',
                    // icon: 'roundRect',
                    itemWidth: 5,
                    itemHeight: 5,
                    right: 0,
                    textStyle: {
                        color: '#B2CEEC',
                        fontSize: 10
                    }
                },
                grid: {
                    top: 35,
                    left: 40,
                    right: 6,
                    bottom: '14%'
                },
                xAxis: {
                    data: times,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    axisLabel: {
                        color: '#B2CEEC',
                        fontSize: 10,
                        interval: 0,
                    }
                },
                yAxis: {
                    name: '(人)',
                    minInterval: 1,
                    nameTextStyle: {
                        color: "#B2CEEC",
                        fontSize: 10,
                        padding: [0, 0, 0, -44]
                    },
                    type: 'value',
                    axisLabel: {
                        color: '#B2CEEC',
                        fontSize: 10,
                    },
                    axisLine: {
                        show: false,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    minInterval: 1,
                    max: function (value) {
                        if( value.max <= 1 ){
                            return value.max  = 10;
                        }if( value.max < 10 ){
                            return value.max = 10
                        }else{
                            return value.max;
                        }
                    }
                },
                series: [{
                    name: '入园人数',
                    type: 'bar',
                    data: inPeopel,
                    lineStyle: {
                        color: '#2BADFF'
                    },
                    itemStyle: {
                        color: '#2BADFF'
                    },
                    barWidth: 14,
                    symbolSize: 3,
                    symbol: 'circle',
                    yAxisIndex: 0,
                    barGap: '30%'
                }, {
                    name: '出园人数',
                    type: 'bar',
                    data: outPeopel,
                    lineStyle: {
                        color: '#59EDFF'
                    },
                    itemStyle: {
                        color: '#59EDFF'
                    },
                    barWidth: 14,
                    symbolSize: 3,
                    symbol: 'circle',
                    yAxisIndex: 0,
                }]
            }
            dom.setOption(options)
        },
        dayPersonInit(dom) {
            const dates = [];
            const inPark = [];
            for (var i = 0; i < this.todayTimes.length; i++) {
                inPark.push(this.todayTimes[i].onCount);
                dates.push(this.todayTimes[i].selectTime);
            }
            const options = {
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    // transitionDuration: 0,
                    backgroundColor: 'rgba(50,50,50,0.7)',
                    textStyle: {
                        color: '#fff'
                    },
                    borderWidth: '0',
                    formatter: function (params) {
                        let str = '';
                        let time = params[0].name;
                        for (let i = 0; i < params.length; i++) {
                            str += params[i].marker + '' + params[i].seriesName + ' : ' + params[i].data + '<br>'
                        }
                        return time + '<br>' + str
                    },
                    axisPointer: {
                        lineStyle: {
                            type: 'solid',
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(0, 255, 233,0)'
                                }, {
                                    offset: 0.5,
                                    color: 'rgba(255, 255, 255,1)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(0, 255, 233,0)'
                                }],
                                global: false
                            }
                        }
                    }
                },
                legend: {
                    type: 'plain',
                    icon: 'roundRect',
                    itemWidth: 5,
                    itemHeight: 5,
                    top: 6,
                    right: 0,
                    textStyle: {
                        color: '#B2CEEC',
                        fontSize: 10
                    }
                },
                grid: {
                    top: 38,
                    left: 46,
                    right: 6,
                    bottom: '14%'
                },
                xAxis: {
                    data: dates,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    axisLabel: {
                        color: '#B2CEEC',
                        fontSize: 10,
                        
                    }
                },
                yAxis: {
                    name: '(人)',
                    nameTextStyle: {
                        color: "#B2CEEC",
                        fontSize: 10,
                        padding: [0, 0, 0, -50]
                    },
                    minInterval: 1,
                    axisLabel: {
                        color: '#B2CEEC',
                        fontSize: 10,
                    },
                    axisLine: {
                        show: false,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    minInterval: 1,
                    max: function (value) {
                        if( value.max <= 1 ){
                            return value.max  = 10;
                        }if( value.max < 10 ){
                            return value.max = 10
                        }else{
                            return value.max;
                        }
                    }
                },
                series: [{
                    name: '在园游客',
                    type: 'line',
                    data: inPark,
                    smooth: true,
                    lineStyle: {
                        color: '#32E9FF',
                        width: 3
                    },
                    itemStyle: {
                        color: '#32E9FF',
                    },
                    symbolSize: 0,
                    symbol: 'circle',
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: 'rgba(50,233,255,0.4)' // 0% 处的颜色
                            }, {
                                offset: 1, color: 'rgba(50,233,255,0.4)' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    },
                    // emphasis: {
                    //     label: {
                    //         show: true,
                    //         fontSize: "30",
                    //         fontWeight: "bold",
                    //     },
                    // },
                }]
            }
            dom.setOption(options)
        },
        parkSevenInit(dom) {
            const dates = [];
            const inPark = [];
            const makePark = [];
            for (var i = 0; i < this.sevenPassenger.length; i++) {
                dates.push(this.sevenPassenger[i].selectTime.slice(5));
                inPark.push(this.sevenPassenger[i].inCount);
                makePark.push(this.sevenPassenger[i].bookingNum);
            }
            const options = {
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    // transitionDuration: 0,
                    backgroundColor: 'rgba(50,50,50,0.7)',
                    textStyle: {
                        color: '#fff'
                    },
                    borderWidth: '0',
                    formatter: function (params) {
                        let str = '';
                        let time = params[0].name;
                        for (let i = 0; i < params.length; i++) {
                            str += params[i].marker + '' + params[i].seriesName + ' : ' + params[i].data + '<br>'
                        }
                        return time + '<br>' + str
                    },
                    axisPointer: {
                        lineStyle: {
                            type: 'solid',
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(0, 255, 233,0)'
                                }, {
                                    offset: 0.5,
                                    color: 'rgba(255, 255, 255,1)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(0, 255, 233,0)'
                                }],
                                global: false
                            }
                        }
                    }
                },
                legend: {
                    type: 'plain',
                    icon: 'roundRect',
                    itemWidth: 5,
                    itemHeight: 5,
                    top: 6,
                    right: 0,
                    textStyle: {
                        color: '#B2CEEC',
                        fontSize: 10
                    }
                },
                grid: {
                    top: 40,
                    left: 60,
                    right: 4,
                    bottom: '12%'
                },
                xAxis: {
                    data: dates,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    axisLabel: {
                        color: '#B2CEEC',
                        fontSize: 10,
                    }
                },
                yAxis: {
                    name: '(人)',
                    minInterval: 1,
                    nameTextStyle: {
                        color: "#B2CEEC",
                        fontSize: 10,
                        padding: [0, 0, 0, -50]
                    },
                    axisLabel: {
                        color: '#B2CEEC',
                        fontSize: 10
                    },
                    axisLine: {
                        show: false,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    minInterval: 1,
                    max: function (value) {
                        if( value.max <= 1 ){
                            return value.max  = 10;
                        }if( value.max < 10 ){
                            return value.max = 10
                        }else{
                            return value.max;
                        }
                    }
                },
                series: [{
                    name: '预约人数',
                    type: 'line',
                    data: makePark,
                    lineStyle: {
                        color: '#2BADFF',
                        width: 3
                    },
                    itemStyle: {
                        color: '#2BADFF'
                    },
                    symbolSize: 0,
                    symbol: 'circle',
                    smooth: false,
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: 'rgba(50,233,255,0.4)' // 0% 处的颜色
                            }, {
                                offset: 1, color: 'rgba(50,233,255,0.4)' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    }
                }, {
                    name: '入园人数',
                    type: 'line',
                    data: inPark,
                    lineStyle: {
                        color: '#EEFD7B',
                        width: 3
                    },
                    itemStyle: {
                        color: '#EEFD7B'
                    },
                    symbolSize: 0,
                    symbol: 'circle',
                    smooth: false,
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: 'rgba(238,253,123,0.4)' // 0% 处的颜色
                            }, {
                                offset: 1, color: 'rgba(238,253,123,0.4)' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    }
                }]
            }
            dom.setOption(options)
        },
        moreMakeInit(dom) {
            let makeNames = [];
            let makeRates = [];
            for (var i = 0; i < this.moreMakeArr.length; i++) {
                if (this.moreMakeArr[i].bookingNum < 7) {
                    if(this.moreMakeArr[i].bookingNum == 2) {
                        this.moreMakeArr[i].bookingNum = '二';
                    } else if (this.moreMakeArr[i].bookingNum == 3) {
                        this.moreMakeArr[i].bookingNum = '三';
                    } else if (this.moreMakeArr[i].bookingNum == 4) {
                        this.moreMakeArr[i].bookingNum = '四';
                    } else if (this.moreMakeArr[i].bookingNum == 5) {
                        this.moreMakeArr[i].bookingNum = '五';
                    } else if (this.moreMakeArr[i].bookingNum == 6) {
                        this.moreMakeArr[i].bookingNum = '六';
                    }
                    makeNames.push(this.moreMakeArr[i].bookingNum + '次')
                } else {
                    if(this.moreMakeArr[i].bookingNum == 7) {
                        this.moreMakeArr[i].bookingNum = '七';
                    }
                    makeNames.push(this.moreMakeArr[i].bookingNum + '次以上')
                }
                makeRates.push(this.moreMakeArr[i].bookingNumber)
            }
            var option = {
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    // transitionDuration: 0,
                    backgroundColor: 'rgba(50,50,50,0.7)',
                    textStyle: {
                        color: '#fff'
                    },
                    borderWidth: '0',
                    formatter: function (params) {
                        let str = ''
                        for (let i = 0; i < params.length; i++) {
                            str += params[i].marker + '' + params[i].name + ' : ' + params[i].data + '<br>'
                        }
                        return str
                    },
                    axisPointer: {
                        lineStyle: {
                            type: 'solid',
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(0, 255, 233,0)'
                                }, {
                                    offset: 0.5,
                                    color: 'rgba(255, 255, 255,1)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(0, 255, 233,0)'
                                }],
                                global: false
                            }
                        }
                    }
                },
                grid: {
                    top: 40,
                    left: 46,
                    right: 0,
                    bottom: 24
                },
                xAxis: {
                    data: makeNames,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    axisLabel: {
                        color: '#B2CEEC',
                        fontSize: 10,
                        interval: 0,
                    }
                },
                yAxis: {
                    name: '(人)',
                    minInterval: 1,
                    nameTextStyle: {
                        color: "#B2CEEC",
                        fontSize: 10,
                        padding: [0, 0, 0, -37]
                    },
                    axisLabel: {
                        color: '#B2CEEC',
                        fontSize: 10,
                        formatter: '{value}'
                    },
                    axisLine: {
                        show: false,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    minInterval: 1,
                    max: function (value) {
                        if( value.max <= 1 ){
                            return value.max  = 10;
                        }if( value.max < 10 ){
                            return value.max = 10
                        }else{
                            return value.max;
                        }
                    }
                },
                series: [{
                    name: '多次预约游客',
                    type: 'bar',
                    data: makeRates,
                    barCategoryGap: 55,
                    barWidth: 16,
                    itemStyle: {
                        color: '#32E9FF'
                    }
                }]
            }
            dom.setOption(option)
        },
        allInParkInit(dom) {
            // var allPeopel = [5000,4000,3000,2000,1000];
            // var manPeopel = [3000,1000,1500,1500,800];
            // var womanPeople = [2000,3000,1500,500,200];
            // var times = ['18岁以下','19-30岁','31-44岁','45-65岁','65岁以上'];
            let allPeopel = [];
            let manPeopel = [];
            let womanPeople = [];
            let times = [];
            for (var i = 0; i < this.ageArr.length; i++) {
                times.push(this.ageArr[i].age);
                allPeopel.push(this.ageArr[i].map.num);
                manPeopel.push(this.ageArr[i].map.man);
                womanPeople.push(this.ageArr[i].map.girl);
            }
            const options = {
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    // transitionDuration: 0,
                    backgroundColor: 'rgba(50,50,50,0.7)',
                    textStyle: {
                        color: '#fff'
                    },
                    borderWidth: '0',
                    formatter: function (params) {
                        let str = ''
                        for (let i = 0; i < params.length; i++) {
                            str += params[i].marker + '' + params[i].seriesName + ' : ' + params[i].data + '<br>'
                        }
                        return str
                    },
                    axisPointer: {
                        lineStyle: {
                            type: 'solid',
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(0, 255, 233,0)'
                                }, {
                                    offset: 0.5,
                                    color: 'rgba(255, 255, 255,1)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(0, 255, 233,0)'
                                }],
                                global: false
                            }
                        }
                    }
                },
                legend: {
                    type: 'plain',
                    // icon: 'roundRect',
                    itemWidth: 5,
                    itemHeight: 5,
                    right: 0,
                    textStyle: {
                        color: '#B2CEEC',
                        fontSize: 10
                    }
                },
                grid: {
                    top: 40,
                    left: 46,
                    right: 0,
                    bottom: '14%'
                },
                xAxis: {
                    data: times,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    axisLabel: {
                        color: '#B2CEEC',
                        fontSize: 10,
                    }
                },
                yAxis: [
                    {
                        name: '(人)',
                        minInterval: 1,
                        nameTextStyle: {
                            color: "#B2CEEC",
                            fontSize: 10,
                            padding: [0, 0, 0, -44]
                        },
                        type: 'value',
                        axisLabel: {
                            color: '#B2CEEC',
                            fontSize: 10
                        },
                        axisLine: {
                            show: false,
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed',
                                color: 'rgba(48,178,236,0.6)'
                            }
                        },
                        minInterval: 1,
                        max: function (value) {
                            if( value.max <= 1 ){
                                return value.max  = 10;
                            }if( value.max < 10 ){
                                return value.max = 10
                            }else{
                                return value.max;
                            }
                        }
                    },
                ],
                series: [{
                    name: '入园人数',
                    type: 'bar',
                    data: allPeopel,
                    lineStyle: {
                        color: '#2BADFF'
                    },
                    itemStyle: {
                        color: '#2BADFF'
                    },
                    barWidth: 14,
                    symbolSize: 3,
                    symbol: 'circle',
                    yAxisIndex: 0,
                    barGap: '30%'
                }, {
                    name: '男性人数',
                    type: 'bar',
                    data: manPeopel,
                    lineStyle: {
                        color: '#32E9FF'
                    },
                    itemStyle: {
                        color: '#32E9FF'
                    },
                    barWidth: 14,
                    symbolSize: 3,
                    symbol: 'circle',
                    yAxisIndex: 0,
                }, {
                    name: '女性人数',
                    type: 'bar',
                    data: womanPeople,
                    lineStyle: {
                        color: '#FFAD95'
                    },
                    itemStyle: {
                        color: '#FFAD95'
                    },
                    barWidth: 14,
                    symbolSize: 3,
                    symbol: 'circle',
                    yAxisIndex: 0,
                }]
            }
            dom.setOption(options)
        },
        dayTop6Init(dom) {
            let cityNames = [];
            let cityRates = [];
            if (this.todayTopData && this.todayTopData.length <= 6) {
                for (var i = 0; i < this.todayTopData.length; i++) {
                    cityNames.push(this.todayTopData[i].userSource);
                    cityRates.push(this.todayTopData[i].userNumber);
                }
            } else if (this.todayTopData && this.todayTopData.length > 6) {
                let arr = this.todayTopData.slice(0, 6);
                for (var i = 0; i < arr.length; i++) {
                    cityNames.push(arr[i].userSource);
                    cityRates.push(arr[i].userNumber);
                }
            } else {
                cityNames = [];
                cityRates = [];
            }
            var option = {
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    // transitionDuration: 0,
                    backgroundColor: 'rgba(50,50,50,0.7)',
                    textStyle: {
                        color: '#fff'
                    },
                    borderWidth: '0',
                    formatter: function (params) {
                        let str = ''
                        for (let i = 0; i < params.length; i++) {
                            str += params[i].marker + '' + params[i].name + ' : ' + params[i].data + '<br>'
                        }
                        return str
                    },
                    axisPointer: {
                        lineStyle: {
                            type: 'solid',
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(0, 255, 233,0)'
                                }, {
                                    offset: 0.5,
                                    color: 'rgba(255, 255, 255,1)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(0, 255, 233,0)'
                                }],
                                global: false
                            }
                        }
                    }
                },
                grid: {
                    top: 40,
                    left: 46,
                    right: 0,
                    bottom: 24
                },
                xAxis: {
                    data: cityNames,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    axisLabel: {
                        color: '#B2CEEC',
                        fontSize: 10,
                        interval: 0,
                    }
                },
                yAxis: {
                    name: '(人)',
                    minInterval: 1,
                    nameTextStyle: {
                        color: "#B2CEEC",
                        fontSize: 10,
                        padding: [0, 0, 0, -37]
                    },
                    axisLabel: {
                        color: '#B2CEEC',
                        fontSize: 10,
                        formatter: '{value}'
                    },
                    axisLine: {
                        show: false,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    minInterval: 1,
                    max: function (value) {
                        if( value.max <= 1 ){
                            return value.max  = 10;
                        }if( value.max < 10 ){
                            return value.max = 10
                        }else{
                            return value.max;
                        }
                    }
                },
                series: [{
                    name: '多次预约游客',
                    type: 'bar',
                    data: cityRates,
                    barCategoryGap: 55,
                    barWidth: 16,
                    itemStyle: {
                        color: '#32E9FF'
                    }
                }]
            }
            dom.setOption(option)
        },
        abroadInit(dom) {
            let dataArr = [];
            let colorArr = ['#32E9FF', '#2BADFF', '#1FFE9A', '#EEFD7B', '#FFAD95', '#A691FF'];
            if(this.abroadObj == null || this.abroadObj.length == 0) {
                for (var i = 0; i < this.abroadEmpty.length; i++) {
                    dataArr.push({
                        name: this.abroadEmpty[i].userSource,
                        value: this.abroadEmpty[i].userNumber,
                        itemStyle: {color: colorArr[i]}
                    })
                    this.abroadAllNums += this.abroadEmpty[i].userNumber;
                }
            } else {
                for (var i = 0; i < this.abroadObj.length; i++) {
                    dataArr.push({
                        name: this.abroadObj[i].userSource,
                        value: this.abroadObj[i].userNumber,
                        itemStyle: {color: colorArr[i]}
                    })
                    this.abroadAllNums += this.abroadObj[i].userNumber;
                }
            }
            const options = {
                title: {
                    text: '总境外游客数量',
                    left: '11%',
                    bottom: '6%',
                    align: 'center',
                    textStyle: {
                        fontSize: 10,
                        color: '#B2CEEC'
                    },
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b} : {c} ({d}%)'
                },
                series: [
                    {
                        type: 'pie',
                        radius: ['48%', '64%'],
                        center: ['23%', '45%'],
                        avoidLabelOverlap: true,
                        hoverAnimation: false,
                        startAngle: 30,
                        emphasis: {},
                        label: {
                            show: false,
                            fontSize: 20,
                            formatter: '{b}\n{c}'
                        },
                        labelLine: {
                            show: true,
                            length: 20,
                            length2: 20
                        },
                        markLine: {
                            silent: true
                        },
                        data: dataArr
                    }
                ]
            }
            dom.setOption(options)
        },
        dayTop7Init(dom) {
            // const dates = ['05:01','05:02','05:03','05:04','05:05','05:06','05:07'];
            // const percent = [33,22,44,66,23,68,80];
            let dates = [];
            let percent = [];
            for (var i = 0; i < this.sevens.length; i++) {
                dates.push(this.sevens[i].selectTime.substring(5, 10));
                if (this.sevens[i].userNumber == 0) {
                    percent.push(0);
                } else {
                    let num = (this.sevens[i].cancelNumber / this.sevens[i].userNumber) * 100;
                    percent.push(num.toFixed(2));
                }
            }
            const options = {
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    // transitionDuration: 0,
                    backgroundColor: 'rgba(50,50,50,0.7)',
                    textStyle: {
                        color: '#fff'
                    },
                    borderWidth: '0',
                    formatter: function (params) {
                        let str = '';
                        let time = params[0].name;
                        for (let i = 0; i < params.length; i++) {
                            str += params[i].marker + '' + params[i].seriesName + ' : ' + params[i].data + '%'
                        }
                        return time + '<br>' + str
                    },
                    axisPointer: {
                        lineStyle: {
                            type: 'solid',
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(0, 255, 233,0)'
                                }, {
                                    offset: 0.5,
                                    color: 'rgba(255, 255, 255,1)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(0, 255, 233,0)'
                                }],
                                global: false
                            }
                        }
                    }
                },
                grid: {
                    top: 40,
                    left: 30,
                    right: 4,
                    bottom: '8%'
                },
                xAxis: {
                    data: dates,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    axisLabel: {
                        color: '#B2CEEC',
                        fontSize: 10,
                    }
                },
                yAxis: {
                    name: '(%)',
                    nameTextStyle: {
                        color: "#B2CEEC",
                        fontSize: 10,
                        padding: [0, 0, 0, -30]
                    },
                    axisLabel: {
                        color: '#B2CEEC',
                        fontSize: 10
                    },
                    axisLine: {
                        show: false,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    splitNumber: 3,
                    // minInterval: 1
                },
                series: [{
                    name: '占比趋势',
                    type: 'line',
                    data: percent,
                    lineStyle: {
                        color: '#1FFE9A',
                        width: 3
                    },
                    itemStyle: {
                        color: '#1FFE9A'
                    },
                    symbolSize: 0,
                    symbol: 'circle',
                    smooth: false,
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: 'rgba(31,254,154,0.4)' // 0% 处的颜色
                            }, {
                                offset: 1, color: 'rgba(31,254,154,0.4)' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    }
                }]
            }
            dom.setOption(options)
        },
        provinceChart1Init(dom) {
            var totalCost = []//比例综合
            var visits = [];  //本期占总的百分比*100
            var grade = [];
            for (var i = 0; i < this.sourceDatas1.length; i++) {
                visits.push(this.sourceDatas1[i].userNumber);
                grade.push(this.sourceDatas1[i].userSource);
                totalCost.push(1)
            }
            visits.reverse();
            grade.reverse();
            let all = Math.max(...visits);
            // for(var i = 0; i < visits.length; i++){
            //     all += visits[i]
            // }
            var newArr = [];
            for (var i = 0; i < visits.length; i++) {
                newArr.push((visits[i] / all).toFixed(2));
            }
            var data = {
                grade: grade,
                cost: newArr,
                totalCost: totalCost,
                visits: visits,
            };
            var option = {
                grid: {
                    left: 60,
                    right: 60,
                    top: 0,
                    bottom: 0
                },
                xAxis: {
                    show: false,
                },
                yAxis: {
                    type: 'category',
                    axisLabel: {
                        margin: 12,
                        show: true,
                        color: '#B2CEEC',
                        fontSize: 10
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                    data: data.grade
                },
                series: [{
                    type: 'bar',
                    barGap: '',
                    label: {
                        normal: {
                            show: true,
                            position: 'right',
                            color: '#2BADFF',
                            fontSize: 16,
                            formatter:
                                function (param) {
                                    return data.visits[param.dataIndex] + '人';
                                },
                        }
                    },
                    barWidth: '16',
                    itemStyle: {
                        normal: {
                            borderColor: '#2BADFF',
                            borderWidth: 2,
                            barBorderRadius: 0,
                            color: 'rgba(102, 102, 102,0)'
                        },
                    },
                    z: 1,
                    data: data.totalCost,
                }, {
                    type: 'bar',
                    barGap: '-76%',
                    barWidth: '8',
                    itemStyle: {
                        normal: {
                            barBorderRadius: 0,
                            color: '#2BADFF',
                        }
                    },
                    max: 1,
                    z: 2,
                    data: data.cost,
                }]
            }
            dom.setOption(option)
        },
        provinceChart2Init(dom) {
            var totalCost = []//比例综合
            // var visits = [2400, 7631, 8933,9223, 2321, 8123,9123,6775,3444,3222,1111,1231,1312,1423,543,645].reverse();  //本期占总的百分比*100
            // var grade = ['安徽省','湖南省','广东省','贵州省','浙江省','福建省','台湾省','甘肃省','云南省','西藏','宁夏','广西','新疆','内蒙古','香港','澳门'].reverse();
            var visits = [];  //本期占总的百分比*100
            var grade = [];
            for (var i = 0; i < this.sourceDatas2.length; i++) {
                visits.push(this.sourceDatas2[i].userNumber);
                grade.push(this.sourceDatas2[i].userSource);
                totalCost.push(1)
            }
            visits.reverse();
            grade.reverse();
            let all = Math.max(...visits);
            // for(var i = 0; i < visits.length; i++){
            //     all += visits[i]
            // }
            var newArr = [];
            for (var i = 0; i < visits.length; i++) {
                newArr.push((visits[i] / all).toFixed(2));
            }
            var data = {
                grade: grade,
                cost: newArr,
                totalCost: totalCost,
                visits: visits,
            };
            var option = {
                grid: {
                    left: 60,
                    right: 60,
                    top: 0,
                    bottom: 0
                },
                xAxis: {
                    show: false,
                },
                yAxis: {
                    type: 'category',
                    axisLabel: {
                        margin: 12,
                        show: true,
                        color: '#B2CEEC',
                        fontSize: 10
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                    data: data.grade
                },
                series: [{
                    type: 'bar',
                    barGap: '',
                    label: {
                        normal: {
                            show: true,
                            position: 'right',
                            color: '#2BADFF',
                            fontSize: 16,
                            formatter:
                                function (param) {
                                    return data.visits[param.dataIndex] + '人';
                                },
                        }
                    },
                    barWidth: '16',
                    itemStyle: {
                        normal: {
                            borderColor: '#2BADFF',
                            borderWidth: 2,
                            barBorderRadius: 0,
                            color: 'rgba(102, 102, 102,0)'
                        },
                    },
                    z: 1,
                    data: data.totalCost,
                }, {
                    type: 'bar',
                    barGap: '-76%',
                    barWidth: '8',
                    itemStyle: {
                        normal: {
                            barBorderRadius: 0,
                            color: '#2BADFF',
                        }
                    },
                    max: 1,
                    z: 2,
                    data: data.cost,
                }]
            }
            dom.setOption(option)
        },
        monthInParkInit(dom) {
            // const dates = ['05:01','05:02','05:03','05:04','05:05','05:06','05:07','05:08','05:09','05:10','05:11','05:12','05:13','05:14','05:15','05:16','05:17','05:18','05:19','05:20','05:21','05:22','05:23','05:24','05:25','05:26','05:27','05:28','05:29','05:30','05:31'];
            // const percent = [33000,22000,44000,66000,23000,68000,8000,33000,22000,44000,66000,23000,68000,8000,33000,22000,44000,66000,23000,68000,8000,33000,22000,44000,66000,23000,68000,8000,20000,30000,50000];
            const dates = [];
            const percent = [];
            for (var i = 0; i < this.hebeiRank.length; i++) {
                dates.push(this.hebeiRank[i].time);
                percent.push(this.hebeiRank[i].number);
            }
            const options = {
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    // transitionDuration: 0,
                    backgroundColor: 'rgba(50,50,50,0.7)',
                    textStyle: {
                        color: '#fff'
                    },
                    borderWidth: '0',
                    formatter: function (params) {
                        let str = '';
                        let time = params[0].name;
                        for (let i = 0; i < params.length; i++) {
                            str += params[i].marker + '' + params[i].seriesName + ' : ' + params[i].data
                        }
                        return time + '<br>' + str
                    },
                    axisPointer: {
                        lineStyle: {
                            type: 'solid',
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(0, 255, 233,0)'
                                }, {
                                    offset: 0.5,
                                    color: 'rgba(255, 255, 255,1)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(0, 255, 233,0)'
                                }],
                                global: false
                            }
                        }
                    }
                },
                grid: {
                    top: 34,
                    left: 50,
                    right: 4,
                    bottom: '8%'
                },
                xAxis: {
                    data: dates,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    axisLabel: {
                        color: '#B2CEEC',
                        fontSize: 10,
                    }
                },
                yAxis: {
                    name: '(人)',
                    minInterval: 1,
                    nameTextStyle: {
                        color: "#B2CEEC",
                        fontSize: 10,
                        padding: [0, 0, 0, -30]
                    },
                    axisLabel: {
                        color: '#B2CEEC',
                        fontSize: 10
                    },
                    axisLine: {
                        show: false,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    minInterval: 1,
                    max: function (value) {
                        if( value.max <= 1 ){
                            return value.max  = 10;
                        }if( value.max < 10 ){
                            return value.max = 10
                        }else{
                            return value.max;
                        }
                    }
                },
                series: [{
                    name: '入园游客',
                    type: 'line',
                    data: percent,
                    lineStyle: {
                        color: '#2BADFF',
                        width: 3
                    },
                    itemStyle: {
                        color: '#2BADFF'
                    },
                    symbolSize: 0,
                    symbol: 'circle',
                    smooth: false,
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: 'rgba(50,233,255,0.4)' // 0% 处的颜色
                            }, {
                                offset: 1, color: 'rgba(50,233,255,0.4)' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    }
                }]
            }
            dom.setOption(options)
        },
        monthRankInit(dom) {
            // let cityNames = ['石家庄','邯郸','邢台','保定','张家口','承德','唐山','秦皇岛','沧州','衡水','廊坊'];
            // let cityRates = [38,30,26,22,19,9,10,2,5,12,23];
            let cityNames = [];
            let cityRates = [];
            for (var i = 0; i < this.month.length; i++) {
                cityNames.push(this.month[i].userSource);
                cityRates.push(this.month[i].userNumber);
            }
            var option = {
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    // transitionDuration: 0,
                    backgroundColor: 'rgba(50,50,50,0.7)',
                    textStyle: {
                        color: '#fff'
                    },
                    borderWidth: '0',
                    formatter: function (params) {
                        let str = '';
                        let time = params[0].name;
                        for (let i = 0; i < params.length; i++) {
                            str += params[i].marker + '' + params[i].name + ' : ' + params[i].data + '人'
                        }
                        return time + '<br>' + str
                    },
                    axisPointer: {
                        lineStyle: {
                            type: 'solid',
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(0, 255, 233,0)'
                                }, {
                                    offset: 0.5,
                                    color: 'rgba(255, 255, 255,1)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(0, 255, 233,0)'
                                }],
                                global: false
                            }
                        }
                    }
                },
                grid: {
                    top: 30,
                    left: 36,
                    right: 0,
                    bottom: 30
                },
                xAxis: {
                    data: cityNames,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    axisLabel: {
                        color: '#B2CEEC',
                        fontSize: 10,
                        interval: 0,
                    }
                },
                yAxis: {
                    name: '(人)',
                    minInterval: 1,
                    nameTextStyle: {
                        color: "#B2CEEC",
                        fontSize: 10,
                        padding: [0, 0, 0, -37]
                    },
                    axisLabel: {
                        color: '#B2CEEC',
                        fontSize: 10,
                        formatter: '{value}'
                    },
                    axisLine: {
                        show: false,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    minInterval: 1,
                    max: function (value) {
                        if( value.max <= 1 ){
                            return value.max  = 10;
                        }if( value.max < 10 ){
                            return value.max = 10
                        }else{
                            return value.max;
                        }
                    }
                },
                series: [{
                    name: '多次预约游客',
                    type: 'bar',
                    data: cityRates,
                    barCategoryGap: 55,
                    barWidth: 24,
                    itemStyle: {
                        color: '#32E9FF'
                    }
                }]
            }
            dom.setOption(option)
        },
        // 设置点
        setMarake(item, selectMenu) {
            // 第二步将ALLMarker传递的值 ，传给contentMain组件
            let params = {
                componentsName: "visitor", //组件名称
                componentsData: [],// 子组件点位数据
            }
            this.$emit('setmarker', params, selectMenu) // 监控点位
        }
    },
    components: {
        AllinMarker
    },
    destroyed(){
        window.clearInterval(this.timer1)
    },
    watch: {
        'alertWindowShow':{
            handler(newVal,oldVal){
                this.spanActive = 1;
                if(newVal){
                    // this.isClick = 1
                    this.timer2 = setInterval(()=>{
                        this.getSourceRank(this.isClick)
                        this.changeDates(this.spanActive)
                        this.getMonthData(this.myChart11);
                    },10000)
                }else{
                    window.clearInterval(this.timer2)
                }
            }
        },
        "spanActive":{
            handler(newVal,oldVal){
                this.isClick = 1
            }
        }
        // todayTimes(val) {
        //     this.dayTimesInit();
        //     this.dayPersonInit();
        // },
        // sevenPassenger(val) {
        //     this.parkSevenInit();
        // },
        // moreMakeArr(val) {
        //     this.moreMakeInit();
        // },
        // todayTopData(val) {
        //     this.dayTop6Init();
        // },
        // hebeiRank(val) {
        //     this.monthInParkInit();
        // },
        // month(val) {
        //     this.monthRankInit();
        // },
        // ageArr(val) {
        //     this.allInParkInit();
        // },
        // abroadObj(val) {
        //     this.abroadInit();
        // },
        // sevens(val) {
        //     this.dayTop7Init();
        // },
        // sourceDatas1(val) {
        //     this.provinceChart1Init();
        // },
        // sourceDatas2(val) {
        //     this.provinceChart2Init();
        // }
    }
}